<script setup lang="ts">
import { watch } from "vue";
// js 语法
// const porps = defineProps({
//   msg: {
//     type: String,
//     default: "默认值",
//   },
// });

// ts 语法，无默认值版本
// const props = defineProps<{
//   msg?: string | number | boolean;
//   title?: string;
// }>();

// ts 语法，有默认值版本
const props = withDefaults(
  defineProps<{
    msg?: string | number | boolean;
    title?: string;
  }>(),
  {
    msg: "withDefaults 初始化的 msg 默认值",
    title: "withDefaults 初始化的 title默认值",
  }
);

// 强制立即执行侦听，组件启动就获取一次值
watch(
  () => props.msg,
  (newValue, oldValue) => {
    console.log("demo-props", newValue, oldValue);
  },
  { deep: true, immediate: true }
);
</script>
<template>
  <p>父组件传入的参数 msg ：{{ msg }}</p>
  <p>父组件未传入 title 参数，使用子组件的默认值 ` {{ title }} `</p>
</template>
